<template>
  <div class="params-container">
    <div class="header">
      <h2>规格参数</h2>
    </div>
    <div class="content">
      <div id="orderBack-step1" class="goToVer" @click="switchVer">
        <div>
          <span>回到</span>
        </div>
        <div style="margin-top: 4px;">
          <span>{{isOldVer ? '新版' : '旧版'}}</span>
        </div>
      </div>
      <div class="transferDiv" :class="getAnimationClass()">
      </div>
      <div class="sroll-div" @mousewheel="handleScroll($event)">
        <vue-seamless-scroll ref="vss" id="vue-scroll" :data="list" :class-option="optionHover" class="vue-scroll">
          <div v-for="(item,index) in list" :key="index" class="scroll-container">
            <div class="left-content">
              <div class="left-content-title">
                <span>{{item.title}}</span>
              </div>
            </div>
            <div class="right-info-list">
              <div v-for="(m,n) in item.info" :key="n" class="right-info-item">
                
                <div class="right-info-title">
                  <span>{{m.info_title}}</span>
                  <template v-if="m.isCheck">
                    <i 
                      class="absoluteQuestion iconfont icon-wenhao" 
                      @mouseenter="mouseEnterExtra(m,$event)"
                      @mouseleave="mouseLeaveExtra(m,$event)"
                    ></i>
                  </template>
                  <div v-show="m.isShowExtra" class="absoluteExtra">
                    <span>{{m.extra_info}}</span>
                  </div>
                </div>
                <div class="right-info-value">
                  <span>{{m.value}}</span>
                </div>
              </div>
            </div>
          </div>
        </vue-seamless-scroll>
      </div>
    </div>
  </div>
</template>

<script>
import steps from "./paramsSteps"
export default {
  name: "Params",
  data() {
    return {
      list: [
        {
          title: "主体",
          info:[
            {
              info_title: "入网型号",
              value: "reno3",
              isCheck: true,
              isShowExtra: false,
              extra_info: "在通讯行业，入网指办理某运营商（联通、移动、电信）的手机卡，且使用该运营商的通讯网络，也可称为开户。"
            },
            {
              info_title: "品牌",
              value: "oppo",
            },
            {
              info_title: "产品名称",
              value: "opporeno3",
            },
            {
              info_title: "上市年份",
              value: "2019年",
            },
            {
              info_title: "上市月份",
              value: "opporeno3",
            }
          ]
        },
        {
          title: "基本信息",
          info:[
            {
              info_title: "机身颜色",
              value: "黑色",
            },
            {
              info_title: "机身长度(mm)",
              value: "160.3",
            },
            {
              info_title: "自身重量(g)",
              value: "181",
            },
            {
              info_title: "机身材质工艺",
              value: "其他",
            },
            {
              info_title: "屏占比",
              value: "90.8%",
              isCheck: true,
              isShowExtra: false,
              extra_info: "屏占比是最早用于手机上的一个概念，用于表示屏幕和手机前面板面积的相对比值，它是手机外观设计上比较容易获得视觉好感的参数。"
            },
            {
              info_title: "机身宽度(mm)",
              value: "74.3",
            },
            {
              info_title: "机身材质分类",
              value: "玻璃后盖",
            },
            {
              info_title: "机身厚度(mm)",
              value: "7.96",
            },
            {
              info_title: "输入方式",
              value: "触控",
            },
            {
              info_title: "运营商标志或内容",
              value: "其他",
              isCheck: true,
              isShowExtra: false,
              extra_info: "运营商是指提供网络服务的供应商"
            },
          ]
        },
        {
          title: "主芯片",
          info: [
            {
              info_title: "CPU型号",
              value: "其他",
            },
            {
              info_title: "CPU品牌",
              value: "高通(Qualcomm)",
            }
          ]
        }
      ],
      isOldVer: false,//切换版本,
      isClick: false,//是否点击过
    }
  },
  computed: {
    optionHover() {
      return {
        step: 0.5,//数值越大速度滚动越快
        limitMoveNum: 2,//开始无缝滚动的数据量，最小是2
        hoverStop: true,//是否开启鼠标悬浮时暂停滚动
        direction: 1,//0向下 1向上 2向左 3向右
        openWatch: true,//开启数据实时监控刷新dom
        singleHeight: 0,//单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0,//单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000,//单步运动停止的时间(默认值1000ms)
      }
    }
  }, 
  mounted() {
    setTimeout(() => {
      this.guide()
    }, 500)
  },
  methods: {
    guide() {//页面引导功能
      this.$driver.defineSteps(steps)
      this.$driver.start()
    },
    handleScroll(e) {
      if(this.isOldVer) return;
      let divEle = document.getElementById("vue-scroll").firstElementChild//滚动的div
      let oneScrollDivHeight = divEle.firstElementChild.clientHeight
      let scrollHeight = 25//模拟滚动多少像素
      // let eleCss = divEle.style.transform
      //获取css中位置移动的px
      // let index = eleCss.indexOf(",")
      // let translateYPx = eleCss.substr(index + 2)//index+2是-63px)
      // let translateYNum = translateYPx.slice(0, -3)//splice-3是去掉最后三个字符
      let translateYNum = this.$refs.vss.yPos
      if (e.wheelDelta || e.detail) {
        if (e.wheelDelta > 0 || e.detail < 0) {     //当鼠标滚轮向上滚动时 ++
          // console.log("向上")
          if(translateYNum <= 0) {
            if(translateYNum >  (-scrollHeight)) {
              // divEle.style.transform = "translate(0px, 0px)"
              this.$refs.vss.yPos = 0
            } else {
              // divEle.style.transform = "translate(0px,  " + (translateYNum * 1 + scrollHeight) + "px)"
              this.$refs.vss.yPos = (translateYNum * 1 + scrollHeight)
            }
          } 
        }
        if (e.wheelDelta < 0 || e.detail > 0) {     //当鼠标滚轮向下滚动时 --
          // console.log("向下")
          if(translateYNum <= 0) {
            if(translateYNum >= scrollHeight - oneScrollDivHeight) {
              // divEle.style.transform = "translate(0px,  " + (translateYNum * 1 - scrollHeight) + "px)"
              this.$refs.vss.yPos = (translateYNum * 1 - scrollHeight)
            } else {
              let temp = oneScrollDivHeight - scrollHeight + translateYNum * 1
              // divEle.style.transform = "translate(0px,  " + temp + "px)"
              this.$refs.vss.yPos = temp
            }
          } 
        }
      }
    },
    switchVer() {
      if(!this.isClick) {
        this.isClick = !this.isClick
      }
      this.isOldVer = !this.isOldVer
      // console.log(this.$refs.vss);
    },
    getAnimationClass() {
      if(this.isClick) {
        if(this.isOldVer) {
          return "back"
        } else {
          return "move"
        }
      } else {
        return ""
      }
    },
    mouseEnterExtra(m,e) {
      m.isShowExtra = true
      console.log(e);
    },
    mouseLeaveExtra(m,e) {
      m.isShowExtra = false
      console.log(e);
    }
  }
}
</script>

<style lang="less" scoped>
.params-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .header {
    width: 100%;
    height: 50px;
    background: black;
    color: #fff;
    display: flex;
    align-items: center;
    > h2 {
      margin-left: 16px;
    }
  }
  .content {
    width: 100%;
    flex: 1;
    background: #f1f2f5;
    overflow: hidden;
    padding: 16px;
    box-sizing: border-box;
    position: relative;
    .goToVer {
      position: absolute;
      left: 8px;
      top: 100px;
      width: 40px;
      height: 65px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      line-height: 18px;
      outline: 1px solid #fdfdfd;
      background: #fdfdfd;
      z-index: 11;
      cursor: pointer;
    }
    .goToVer:hover {
      // outline: 1px solid #292cd06b;
      background-color: #fffdf5;
      color: #72201b;
      box-shadow: 0 0 20px 1px #6269ffad;
    }
    .transferDiv {
      width: 100%;
      height: 100%;
      position: absolute;
      right: -100%;
      top: 0px;
      // background-color: rgba(149, 178, 146, 0.47);
      box-shadow: inset 0 0 2000px 0px #bde5d9;
      z-index: 10;
    }
    .sroll-div {
      width: 50%;
      min-width: 800px;
      height: 100%;
    }
    .sroll-div::-webkit-scrollbar {
      width: 0px;
    }
    .vue-scroll {
      width: 100%;
      height: 100%;
    }

    .scroll-container {
      width: 100%;
      height: auto;
      padding: 16px;
      display: flex;
      .left-content {
        width: 40%;
        display: flex;
        justify-content: center;
        .left-content-title {
          height: 70px;
          span {
            line-height: 70px;
          }
        }
      }

      .right-info-list {
        width: 60%;
        display: flex;
        flex-direction: column;
        align-items: center;

        .right-info-item {
          width: 80%;
          margin-top: 16px;
          min-height: 40px;
          display: flex;

          .right-info-title {
            width: 50%;
            height: 100%;
            display: flex;
            align-items: center;
            position: relative;
          }
          .right-info-value {
            width: 50%;
            height: 100%;
            display: flex;
            align-items: center;
          }
          .absoluteQuestion {
            font-size: 24px;
            margin-left: 4px;
          }
          .absoluteExtra {
            position: absolute;
            max-width: 300px;
            min-width: 150px;
            max-height: 300px;
            padding: 16px;
            border: 1px solid red;
            background-color: cornsilk;
            left: 0;
            top: 35px;
            z-index: 10;
          }
        }
      }
    }
  }
}
@keyframes moveAction {
  0% {transform: translateX(-100%);}
  100% {transform: translateX(0%);}
}
@keyframes backAction {
  0% {transform: translateX(-100%);}
  100% {transform: translateX(-200%);}
}
.move {
  animation: moveAction .7s 1 forwards;
  animation-timing-function: ease-in-out;
  animation-direction: alternate;
}
.back {
  animation: backAction .7s 1 forwards;
  animation-timing-function: ease-in-out;
  animation-direction: alternate;
}
</style>